﻿@page "/components/select"
<PageHeader Title="Select 选择器">用于收纳大量选项的信息录入类组件。</PageHeader>


<LayoutContent AnchorItems="@(new[]{"示例","禁用状态","不同尺寸的选择器","自定义下拉选项的选择器","API"})">

<Example Title="示例">
    <Description></Description>
    <RunContent>

        <TSpace>
            <TSpaceItem>

                <TSelect @bind-Value="Value1">
                    <TSelectOption Value="1" Label="男" />
                    <TSelectOption Value="2" Label="女" />
                </TSelect>
            </TSpaceItem>
            <TSpaceItem>

                <TSelect @bind-Value="Value2">
                    <TSelectOption Value="@("云计算")" Label="云计算" />
                    <TSelectOption Value="@("RDS")" Label="RDS" />
                    <TSelectOption Value="@("云存储")" Label="云存储" Disabled/>
                </TSelect>
            </TSpaceItem>
        </TSpace>
        
        
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TSelect @bind-Value=""Value"">
    <TSelectOption Value=""1"" Label=""男""/>
    <TSelectOption Value=""2"" Label=""女""/>
</TSelect> 

<TSelect @bind-Value=""Value2"">
    <TSelectOption Value=""云计算"" Label=""云计算"" />
    <TSelectOption Value=""RDS"" Label=""RDS"" />
    <TSelectOption Value=""云存储"" Label=""云存储"" Disabled/>
</TSelect>
```
")
    </CodeContent>
</Example>

@code{
    int Value1{ get; set; }
    string Value2 { get; set; }
}

<Example Title="禁用状态">
    <Description></Description>
    <RunContent>

        <TSelect @bind-Value="Value1" Disabled>
            <TSelectOption Value="1" Label="男" />
            <TSelectOption Value="2" Label="女" />
        </TSelect>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TSelect @bind-Value=""Value"" Disabled>
    <TSelectOption Value=""1"" Label=""男""/>
    <TSelectOption Value=""2"" Label=""女""/>
</TSelect>
```
")
    </CodeContent>
</Example>


<Example Title="不同尺寸的选择器">
    <Description>提供大、中（默认）、小三种不同尺寸的的选择器。</Description>
    <RunContent>
        <TSpace>
            <TSpaceItem>
                <TSelect @bind-Value="Value1" Size="Size.Small">
                    <TSelectOption Value="1" Label="男" />
                    <TSelectOption Value="2" Label="女" />
                </TSelect>
            </TSpaceItem>            
            <TSpaceItem>
                <TSelect @bind-Value="Value1">
                    <TSelectOption Value="1" Label="男" />
                    <TSelectOption Value="2" Label="女" />
                </TSelect>
            </TSpaceItem>
            <TSpaceItem>
                <TSelect @bind-Value="Value1" Size="Size.Large">
                    <TSelectOption Value="1" Label="男" />
                    <TSelectOption Value="2" Label="女" />
                </TSelect>
            </TSpaceItem>
        </TSpace>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TSelect @bind-Value=""Value"" Size=""Size.Small"">
    <TSelectOption Value=""1"" Label=""男""/>
    <TSelectOption Value=""2"" Label=""女""/>
</TSelect>

<TSelect @bind-Value=""Value"" Size=""Size.Small"">
    <TSelectOption Value=""1"" Label=""男""/>
    <TSelectOption Value=""2"" Label=""女""/>
</TSelect>

<TSelect @bind-Value=""Value"" Size=""Size.Large"">
    <TSelectOption Value=""1"" Label=""男""/>
    <TSelectOption Value=""2"" Label=""女""/>
</TSelect>
```
")
    </CodeContent>
</Example>

<Example Title="自定义下拉选项的选择器">
    <Description></Description>
    <RunContent>

        <TSelect @bind-Value="Value1">
            <TSelectOption Value="1" Label="男" >
                <div style="display:flex">
                <TImage Src="avatar.jpg"  AdditionalStyle="width:24px"/>
                <div style="margin-left:16px">
                男
                    </div>
                </div>
            </TSelectOption>
            <TSelectOption Value="2" Label="女" >

                <div style="display:flex">
                    <TImage Src="avatar.jpg" AdditionalStyle="width:24px" />
                    <div style="margin-left:16px">
                        女
                    </div>
                </div>
                </TSelectOption>
        </TSelect>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TSelect @bind-Value=""Value1"">
    <TSelectOption Value=""1"" Label=""男"" >
        <div style=""display:flex"">
            <TImage Src=""avatar.jpg""  AdditionalStyle=""width:24px""/>
            <div style=""margin-left:16px"">
                男
            </div>
        </div>
    </TSelectOption>
    <TSelectOption Value=""2"" Label=""女"" >

        <div style=""display:flex"">
            <TImage Src=""avatar.jpg"" AdditionalStyle=""width:24px"" />
            <div style=""margin-left:16px"">
                女
            </div>
        </div>
        </TSelectOption>
</TSelect>
```
")
    </CodeContent>
</Example>
<div id="API"></div>
    <ComponentAPI  Component="typeof(TSelect<>)" />
    <ComponentAPI  Component="typeof(TSelectOption<>)" />

</LayoutContent>